<template>
	<view class="container" :style="hasChat === true ? '' : 'padding-top: 10%;'">
		<div v-if="!hasChat" style="width: 100%;height: 100%;">
			<div class="chat-header">
				<image src="/static/logo.png" style="width: 45px; height: 45px;"></image>
				<div class="text-title">护家Lane智辅系统</div>
			</div>
			<div class="chat-describe">
				<span class="text" style="font-size: 18px;font-weight: bold;color: grey;"></span>
			</div>
			<div class="chat-input">
				<u--textarea v-model="questionInput" placeholder="尽管问..." style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;"></u--textarea>
				<u-button type="primary" @click="chat" style="margin-top: 5%;" text='发送'></u-button>
			</div>
			<div class="chat-example">
				<div class="single-example" v-for="(item,index) in exampleQuestionList" :key="index" @click="sendExample(item)">
					<u-icon :name="item.icon" size="28"></u-icon>
					<div class="example-text">{{item.text}}</div>
				</div>
			</div>
		</div>
		<div v-else style="width: 100%;height: 100%;">
			<div class="chat-area">
				<div class="single-chat" v-for="(item,index) in chatHistory" :key="index">
					<u-transition :show="true" mode="fade-up">
						<div v-if="item.role === 0" class="gptAnswer">
							<u-avatar src="../../static/icon/gpt.png"></u-avatar>
							<div class="content" style="margin-left: 8px;background-color: #f9f9f9;"
								v-html="item.content"></div>
						</div>
					</u-transition>
					<u-transition :show="true" mode="fade-up">
						<div v-if="item.role === 1" class="userQuestion">
							<div class="content" style="margin-right: 8px;" v-html="item.content"></div>
							<u-avatar
								src="https://worduniapp.oss-cn-beijing.aliyuncs.com/20240110222041_e2fc686655d9402dad1f9fee267a8456.ico"></u-avatar>
						</div>
					</u-transition>
				</div>
			</div>
			<u-transition :show="true" mode="fade-up">
				<div class="question-area">
					<u--input placeholder="请输入内容" border="surround" v-model="questionInput"
						style="margin-left: 5px;background-color: white;"></u--input>
					<u-button type='success' @click="chat" text='发送'
						style="width: 20%;margin-left: 5px;margin-right: 5px;"></u-button>
				</div>
			</u-transition>
		</div>
	</view>
</template>

<script>
	import io from '@hyoga/uni-socket.io';
	export default {
		data() {
			return {
				chatHistory: [],
				isInit: true,
				questionInput: '',
				hasChat: false,
				// 存储每次gpt的回答
				answer: '',
				idx: 0,
				chatHistory: [{
					role: 0,
					content: '你好，有什么我可以帮助你的吗?'
				}, ],
				exampleQuestionList: [{
						icon: 'chat',
						text: '你知道新时代数学推理模型 k0-math吗',
					},
					{
						icon: 'cut',
						text: '剪映CapCut 小技巧，学会轻松剪视频',
					},
					{
						icon: 'tags',
						text: '一键生成爆款笔记',
					},
					{
						icon: 'file-text',
						text: '深度学习环境配置小技巧',
					},
					{
						icon: 'bookmark',
						text: 'CSS阴影样式的多种样例',
					}
				]
			}
		},
		methods: {
			sendExample(item) {
				this.questionInput = item.text
				this.chat()
			},
			chat() {
				if (this.questionInput.length <= 0) {
					return;
				}
				this.hasChat = true;
				let that = this;
				this.answer = '';
				this.idx = 0;

				// 将用户的提问加入聊天历史记录
				this.chatHistory.push({
					role: 1,
					content: this.questionInput
				})

				// 加入一条gpt回答 同时开始构造流式回答
				this.chatHistory.push({
					role: 0,
					content: '',
				})

				setInterval(function() {
					let len = that.chatHistory.length;
					if (that.idx < that.answer.length) {
						that.chatHistory[len - 1].content = that.answer.slice(0, that.idx + 1);
						that.idx++;
					}
				}, 100)

				const socket = io('http://yiyuy.nat300.top/chat', {
					query: {
						"question": that.questionInput
					},
					transports: ['websocket', 'polling'],
					timeout: 5000,
				});
				socket.on('connect', () => {
					// ws连接已建立，此时可以进行socket.io的事件监听或者数据发送操作
					// 连接建立后，本插件的功能已完成，接下来的操作参考socket.io官方客户端文档即可
					console.log('ws 已连接');
				});

				// 监听服务器事件
				socket.on('server_response', (message) => {
					// 收到服务器推送的消息，可以跟进自身业务进行操作
					console.log('ws 收到服务器消息：', message.data);
					if (message.data === '[over]') {
						socket.disconnect()
						console.log('断开连接')
					} else {
						that.answer += message.data;
					}
				});

				socket.on('error', (msg) => {
					console.log('ws error', msg);
				});

				this.questionInput = ''
			}
		},
	}
</script>

<script module="test" lang="renderjs">
	export default {
		name: "chat",
		data() {
			return {
				talkTitle: [
					'阅书万卷，我是你的知识宝典',
					'跨界协作，我是你的智能体',
					'一触即发，我是你的灵感引擎',
					'一问即答，我是你的文档专家',
					'一语成诗，我是你的文学大师',
					'一拍即合，我是你的创意伙伴',
				]
			};
		},
		mounted() {
			this.sayWord()
		},
		methods: {
			// 对话框轮播播放
			sayWord() {
				const text = document.querySelector('.text');
				const txt = this.talkTitle

				var index = 0;
				var xiaBiao = 0;
				var huan = true;

				setInterval(function() {

					if (huan) {
						if (index >= 9) {
							text.innerHTML = txt[xiaBiao].slice(0, 9) + '<font color="#6495ed">' + txt[
								xiaBiao].slice(9, ++index) + '</font>';
						} else {
							text.innerHTML = txt[xiaBiao].slice(0, ++index);
						}
					} else {
						if (index >= 9) {
							text.innerHTML = txt[xiaBiao].slice(0, 9) + '<font color="#6495ed">' + txt[
								xiaBiao].slice(9, index--) + '</font>';
						} else {
							text.innerHTML = txt[xiaBiao].slice(0, index--);
						}
					}

					if (index == txt[xiaBiao].length + 3) {
						huan = false;
					} else if (index < 0) {
						index = 0;
						huan = true;
						xiaBiao++;
						if (xiaBiao >= txt.length) {
							xiaBiao = 0;
						}
					}

				}, 200)
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100vh;
	}

	.chat-header {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.chat-describe {
		height: 18px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text-title {
		font-size: 24px;
		font-weight: bold;
	}

	.chat-input {
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
	}

	.chat-example {
		width: 100%;
	}

	.single-example {
		background-color: #f3f5fa;;
		width: 90%;
		margin: 0 auto;
		display: flex;
		margin-top: 5%;
		align-items: center;
		padding: 1%;
		border-radius: 10px;
	}

	.chat-area {
		width: 100%;
		height: 88%;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
	}

	.single-chat {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 3%;
	}

	.gptAnswer {
		display: flex;
	}

	.userQuestion {
		display: flex;
		margin-left: auto;
	}

	.content {
		padding: 5px;
		display: flex;
		align-items: center;
		border-radius: 5px;
		box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	}

	.question-area {
		width: 100%;
		flex: 1;
		display: flex;
	}
</style>